<template>
	<a-card>
		<a-row :gutter="[16, 16]">
			<a-col :span="24">
				<a-button type="primary" @click="addNewMenu">
					<template #icon><PlusOutlined /></template>
					创建
				</a-button>
			</a-col>
			<a-col :span="24">
				<a-table
					:columns="columns"
					:data-source="dataSource"
					:pagination="false"
					:rowKey="
						(record, index) => {
							return record.id
						}
					"
				>
					<template #menu_type="{ record }">
						{{ menutype[record.menu_type] }}
					</template>
					<template #status="{ record }">
						<SWITCH
							:status="record.status == 0 ? false : true"
							:data="record"
							:disabled="record.id==1?true:false"
							@changeSwitch="changeSwitch"
						/>
					</template>
					<template #action="{ record }">
						<a-space>
							<a-button type="primary" @click="editMenu(record)">编辑</a-button>
							<a-popconfirm
								title="是否确定删除？"
								ok-text="是"
								cancel-text="否"
								:disabled="record.id == 1"
								@confirm="handelDelet(record)"
							>
								<a-button type="danger" :disabled="record.id == 1"
									>删除</a-button
								>
							</a-popconfirm>
						</a-space>
					</template>
				</a-table>
			</a-col>
		</a-row>
		<MENUFROM
			v-if="visible"
			:visible="visible"
			@close-modal="handleCancel"
			:title="title"
			:model="model"
			@ok="handleok"
		/>
	</a-card>
</template>
<script>
import { defineComponent, ref, onMounted } from 'vue'
import { getAdminMenu, addMenu, updateMenu, delMenu,updateMenuStatus } from '/@/api/app.js'
import {SWITCH} from '/@/components'
import { PlusOutlined } from '@ant-design/icons-vue'
import MENUFROM from './modules/MenuFrom.vue'
import { message } from 'ant-design-vue'
function arrToTree(arr, pid = null) {
	const res = []
	arr.forEach((item) => {
		if (item.pid === pid) {
			// 这样每次都需要遍历整个数组，因此时间复杂度为 n*n
			// const children = arrToTree(arr, item.id)

			// 往下递归时，每次数组的大小都在减小，每次都筛选掉父代元素，最终的时间复杂度为 n*logn
			const children = arrToTree(
				arr.filter((v) => v.pid !== pid),
				item.id
			)
			if (children.length) {
				res.push({ ...item, children })
			} else {
				res.push({ ...item })
			}
		}
	})
	return res
}

const columns = [
	{
		title: '菜单名称',
		dataIndex: 'name',
		key: 'name',
		width: 300
	},
	{
		title: '菜单类型',
		dataIndex: 'menu_type',
		align: 'center',
		key: 'menu_type',
		slots: { customRender: 'menu_type' }
	},

	{
		title: '后台路由地址',
		dataIndex: 'url',
		key: 'url',
		align: 'center'
	},

	{
		title: '状态(启用/停用)',
		dataIndex: 'status',
		key: 'status',
		align: 'center',
		slots: { customRender: 'status' }
	},
	{
		title: '操作',
		dataIndex: 'action',
		key: 'action',
		width: '150px',
		slots: { customRender: 'action' }
	}
]
export default defineComponent({
	components: {
		SWITCH,
		PlusOutlined,
		MENUFROM
	},
	setup() {
		const dataSource = ref([])
		const visible = ref(false)
		const title = ref('')
		const model = ref({})
		const getAdminMenuList = () => {
			getAdminMenu()
				.then((res) => {
					const {
						result: { list }
					} = res
					dataSource.value = arrToTree(list, 0)
				})
				.catch(() => {})
		}
		const changeSwitch = (n) => {
		 
			const {
				data: { id },
				status
			} = n
			updateMenuStatus({
				id,
				status: status ? 1 : 0
			})
				.then((res) => {
					message.success('状态修改成功')
					getAdminMenuList()
				})
				.catch(() => {})
		}
		const addNewMenu = () => {
			title.value = '新建菜单'
			visible.value = true
			model.value.edit = false
		}
		const editMenu = (n) => {
			title.value = '编辑菜单'
			visible.value = true
			model.value = n
			model.value.edit = true
		}
		const handleok = (n) => {
			const {
				model: { edit, id },
				values: { icon, menu_type, name, pid, sort, status, url }
			} = n
			var params = {}
			if (!pid) {
				params.pid = 0
			} else {
				params.pid = pid * 1
			}
		 
				params.sort = sort * 1
			 

			params.icon = icon
			params.menu_type = menu_type * 1
			params.name = name
			params.status = status * 1
			params.url = url

			if (!edit) {
				// 新建
				addMenu(params)
					.then((res) => {
						message.success('创建成功')
						visible.value = false
						getAdminMenuList()
					})
					.catch(() => {})
			} else {
        params.id =id;
         updateMenu(params)
					.then((res) => {
						message.success('修改成功')
						visible.value = false
						getAdminMenuList()
					})
					.catch(() => {})
			}
		}
		const handelDelet = (n) => {
			const { id } = n
			delMenu([id])
				.then((res) => {
					message.success('删除成功')

					getAdminMenuList()
				})
				.catch(() => {})
		}
		const handleCancel = () => {
			visible.value = false
		}
		onMounted(() => {
			getAdminMenuList()
		})
		return {
			columns,
			visible,
			dataSource,
			getAdminMenuList,
			changeSwitch,
			addNewMenu,
			handleCancel,
			title,
			model,
			editMenu,
			handleok,
			handelDelet,
			menutype: ['', '模块', '菜单', '操作']
		}
	}
})
</script>